<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { onMounted, reactive, ref } from "vue";
import { requestSongListCollection } from '../../../utils/axiosURL'
import defaultImg from "../../../assets/logo.png";
const router = useRoute()
// 歌单ID
const songListID = ref<any>(router.query.id)
// 存储所有收藏者数据
let collectionData = reactive<any>([])
// 所有收藏者请求
const requestSongListCollectionFn = () => {
  requestSongListCollection(songListID.value).then((data: any) => {
    collectionData.values = data.subscribers
  }).catch(err => {
    console.log(err)
  })
}
// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};

onMounted(() => {
  requestSongListCollectionFn()
})
</script>


<template>
  <div class="collectorWrap">
    <div class="collectorItem" v-for="item in collectionData.values">
      <div class="leftImg">
        <RouterLink :to="{ path: '/userDetail', query: { id: item.userId } }">
          <img v-lazy="`${item.avatarUrl}`" alt="">
        </RouterLink>
      </div>
      <div class="rightUserInfo">
        <p>{{ item.nickname }}</p>
        <p class="signature" v-if=item.signature>{{ item.signature }}</p>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.collectorWrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 30px;
  box-sizing: border-box;

  .collectorItem {
    display: flex;
    width: 50%;
    height: 100px;
    margin-bottom: 10px;

    .leftImg {
      flex-basis: 100px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .rightUserInfo {
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      flex: 1;
      margin-left: 10px;

      p {
        font-family: $textFont;
      }

      .signature {
        width: 240px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
